<template>
  <div><br>
    <div class="top1">
        <br><br><br>
        <div>
            手机号：<input v-model="mobile" type="text"><br><br>
            密&emsp;码：<input v-model="password" type="text">
        </div>
        <br><br><br>
        <div>
            <van-button class="top2" type="primary" @click="login">登录</van-button>
        </div>
    </div>
    <!--  -->
    <div></div>
    <!--  -->

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        mobile: '111',
        password: '111',
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
    login(){
        if (!this.mobile || !this.password){
            this.$message({
                type: 'warning',
                message: '数据不能为空'
            })
            return;
        }
        this.axios.post('/login', {'username': this.mobile, 'password': this.password})
        .then(res =>{
            console.log('登录的响应:', res)
            if (res.data.code == 200) {
            this.$message({
                type: 'success',
                message: res.data.message
            })
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('role_id', res.data.role_id)
            localStorage.setItem('user_id', res.data.user_id)
            this.$router.push('/')
                
            } else {
            this.$message({
                type: 'error',
                message: res.data.message
            })
                
            }
        }).catch(err =>{
            console.log('登录报错的响应:', err)
        })
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
* {
  margin: 0;
}
.top1{
    border: 2px #000 solid;
    width: 60%;
    height: 300px;
    margin: 0 auto;
    /* line-height: 300px; */
}
.top2{
    width: 80%;
}
</style>
